<style>
	.zijiad {
		width: 100%;
		height: 3em;
	}

	.zijiad_q {
		width: 100%;
		height: 3em;
		color: #fff;
		text-align: center;
		font-size: 1.1em;
		font-weight: 700;
	}

	.zijiad_w {
		width: 100%;
		height: 12rem;
	}

	.zijiad_e {
		float: left;
		padding: 9rem 0 0 1rem;
		;
		color: #fff;
		font-size: 1.2em;
		height: 2em;
		line-height: 2em;
		font-weight: 900;
	}

	.fenleifen {
		background-color: #fff;
		color: #0099ff;
		padding: 0 1em;
		border-radius: 0.5em;
		height: 2em;
		line-height: 2em;
	}

	.element::-webkit-scrollbar {
		width: 0;
		/* Chrome、Safari等WebKit内核浏览器支持该属性 */
	}

	/* 隐藏垂直滚动条 */
	.element::-webkit-scrollbar {
		height: 0;
		/* Chrome、Safari等WebKit内核浏览器支持该属性 */
	}

	/* Firefox浏览器需要添加如下样式 */
	.element {
		scrollbar-width: none;
		/* Firefox浏览器不支持上述属性，所以通过设置为none来隐藏滚动条 */
	}

	/* IE10及更高版本浏览器需要添加如下样式 */
	/* .element {
		width: 95%;
		margin: 0 auto;
		overflow-x: scroll;
		white-space: nowrap;
		-ms-overflow-style: none;
	}

	.zijiad_r {
		padding: 0 1em;
		height: 2em;
		display: inline-block;
		font-size: 1.2em;
	}

	.gaizid {
		font-weight: 900;
		font-size: 1.4em;
		color: #0099ff;
	}

	.zijiad_t {
		width: 2em;
		height: 2px;
		background-color: #0099ff;
		margin: 0.5em auto;
		border-radius: 1px;
	} */
	.element {
	  width: 95%;
	  margin: 0 auto;
	  overflow-x: auto;
	  white-space: nowrap;
	  -webkit-overflow-scrolling: touch;
	  scrollbar-width: none;
	  -ms-overflow-style: none;
	  display: flex;
	  gap: 0;
	}
	
	.zijiad_r {
	  padding: 10px 1em;
	  height: 20px;
	  display: flex;
	  align-items: center;
	  font-size: 1.2em;
	  white-space: nowrap;
	  flex-shrink: 0;
	  cursor: pointer;
	}
	
	.gaizid {
	  font-weight: 900;
	  font-size: 1.4em;
	  color: #0099ff;
	  position: relative;
	}
	
	.gaizid::after {
	  content: '';
	  position: absolute;
	  bottom: 0;
	  left: 50%;
	  transform: translateX(-50%);
	  width: 40px;
	  height: 2px;
	  background-color: #0099ff;
	  border-radius: 1px;
	}

	.dizhi {
		width: 95%;
		border-radius: 1em;
		margin: 0 auto;
		background-color: #F8F8F8;

		padding: 0 0 2em 0;
	}

	.dizhi_q {
		width: 95%;
		margin: 0 auto;
		border-bottom: 1px solid #F0F0F0;

	}

	.dizhi_w {
		width: 4em;
		float: left;
	}

	.dizhi_e {
		width: 2em;
		height: 2em;
		background-color: #000;
		color: #fff;
		border-radius: 1em;
		text-align: center;
		line-height: 2em;
		margin: 0 auto;
		position: relative;
		top: 1.5em
	}

	.dizhi_r {
		width: 95%;
		margin: 0 auto;
	}

	.dizhi_t {
		width: 2em;
		height: 2em;
		background-color: #0099ff;
		color: #fff;
		border-radius: 1em;
		text-align: center;
		line-height: 2em;
		margin: 0 auto;
		position: relative;
		top: 1.5em
	}

	.dizhi_y {
		/* font-weight: 900; */
		font-size: 1.3em;
		line-height: 4em;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.jiage {
		text-align: center;
		height: 5em;
		font-size: 1.3em;
		line-height: 5em;
	}

	.jiage_w {
		font-weight: 900;
		font-size: 1.6em;
	}

	.price-type-info {
		margin-top: 0.5em;
		text-align: center;
	}

	.price-type-text {
		background-color: #0099ff;
		color: #fff;
		padding: 0.2em 0.8em;
		border-radius: 1em;
		font-size: 0.8em;
	}

	.debug-info {
		width: 95%;
		margin: 1em auto;
		background-color: #f5f5f5;
		border-radius: 0.5em;
		padding: 1em;
		font-size: 0.9em;
	}

	.debug-item {
		margin-bottom: 0.5em;
		padding: 0.3em 0;
		border-bottom: 1px solid #ddd;
	}

	.debug-item:last-child {
		border-bottom: none;
		margin-bottom: 0;
	}

	.xiayibu {
		text-align: center;
		background-color: #0099ff;
		color: #fff;
		border-radius: 0.5em;
		line-height: 3em;
		height: 3em;
		font-weight: 900;
		width: 95%;
		margin: 0 auto;
		font-size: 1.4em;
	}

	.tupian {
		width: 100%;
		height: 100%;
	}

	.dainhe {
		width: 95%;
		background-color: #fff;
		border-radius: 0.5em;
		margin: 1em auto;
		overflow: auto;
	}

	.dainhe1 {
		width: 95%;
		background-color: #0099ff;
		border-radius: 0.5em;
		margin: 1em auto;
		overflow: auto;
	}

	.dainhe_q {
		padding: 1em 1.5em;
		font-weight: 900;
		font-size: 1.5em;
	}

	.dainhe_w {
		color: #0099ff;
		padding: 0 0 0 1em;
	}

	.dainhe_e {
		float: right;
		width: 2em;
		height: 2em;
		position: relative;
		bottom: 0.5em;
	}

	.uni-margin-wrap {
		width: 690rpx;
		width: 100%;
	}

	.swiper {
		height: 300rpx;
	}

	.swiper-item {
		display: block;
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
	}

	.swiper-list {
		margin-top: 40rpx;
		margin-bottom: 0;
	}

	.uni-common-mt {
		margin-top: 60rpx;
		position: relative;
	}

	.info {
		position: absolute;
		right: 20rpx;
	}

	.uni-padding-wrap {
		width: 550rpx;
		padding: 0 100rpx;
	}

	.pinglun {
		width: 95%;
		margin: 1em auto;
		background-color: #fff;
		border-radius: 1em;
		overflow: auto;
	}

	.pinglun_q {
		display: flex;
		text-align: center;
		font-size: 1.4em;
		position: relative;
		top: 1em
	}

	.zanm {
		width: 100%;
		height: 2em;
	}

	.dianhaseP {
		width: 26px;
		height: 10px;
		position: relative;
		margin: 0 auto;
		z-index: 888;
	}

	.inmagsewe {
		bottom: 20px;
		position: relative;
		z-index: 99999;
	}

	.gaiske {
		font-weight: 900;
	}

	.pinglun_zan {
		width: 20%;
		float: left;
		height: 4em;
	}

	.pinglun_zan_q {
		width: 4em;
		height: 4em;
	}

	.pinglun_zan_w {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.kehuliu {
		width: 100%;
		clear: both;
		padding: 2em 0 2em 0;
	}

	.kehuliu_q {
		width: 80%;
		float: right;
		color: #c0c0c0;
	}

	.kehuliu_w {
		font-size: 1.2em;
	}

	.kehuliu_e {
		float: right;
		font-size: 1.2em;
	}

	.kehuliu_e1 {
		padding: 1em 0 2em 0;
		font-size: 1.4em;
	}
</style>


<style lang="scss">
	// 弹窗效果
	.popup {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #fff;
		// padding: 20rpx;
		box-sizing: border-box;
		z-index: 999;
	}

	// 遮罩层
	.mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 888;
	}

	.dibu {
		width: 100%;
		text-align: center;
		line-height: 3em;
		font-weight: 900;
		font-size: 1.5em;
		overflow: auto;
	}

	.dibu_q {
		width: 2em;
		height: 2em;
		position: absolute;
		right: 0.5em;
		top: 0.5em;
	}

	.dibu_w {
		width: 90%;
		margin: 0 auto;
		height: 4em;
		clear: both;
	}

	.dibu_e {
		width: 1.3em;
		height: 1.3em;
		float: left;
		position: relative;
		top: 0.25em
	}

	.dibu_r {
		font-weight: 900;
		font-size: 1.3em;
		float: left;
		width: 80%;
		padding: 0 0 0 1em;
	}

	.dibu_t {
		color: #0099ff;
		font-size: 0.8em;
		font-weight: 100;
		padding: 0.5em 0 1em 0
	}

	.dibu_u {
		width: 100%;
		height: 2em;
		text-align: center;
	}

	.dibu_i {
		background-color: #fff;
		border-radius: 0.5em;
		height: 3em;
		line-height: 3em;
	}


	@keyframes spin {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}

	.sdsad {
		width: 2rem;
		height: 2rem;
		position: fixed;
		background-color: rgba(0, 0, 0, 0.4);
		z-index: 99999;
		bottom: 20vh;
		right: 1rem;
		border-radius: 1.5rem;
	}

	.spin-element {
		animation: spin 5s linear infinite;

		/* 其他样式，比如宽高、颜色等 */
	}
</style>
<template>
	<view :data-theme='theme()' :class="theme() || ''">
		<view class="top_head pr"
			:style="'height: 70vw;' + (!showQRCodeModal ? 'background-image:url(https://tsinghua-wechat-hq.oss-cn-beijing.aliyuncs.com/beijn.jpg);background-repeat:no-repeat;background-size:100% 100%;' : '')">

			<view class="sdsad" :class="asdad == 0 ? 'spin-element' : ''" v-if="showPlayBtn">
				<!-- @click="bofangdse()" 没有用 -->
				<image style="width:1rem;height:1rem;margin: 0 auto;position: relative;top: 0.5rem;"
					src="../../static/yongyuede.png">

				</image>

			</view>
			<!-- #ifdef MP-WEIXIN -->
			<!-- 微信自己写的 1-->
			<view class="zijiad">

			</view>
			<view class="zijiad_q" v-show="!showQRCodeModal">本地官方认证-全国托运中心</view>

			<view class="zijiad_w" v-show="!showQRCodeModal">
				<view class="zijiad_e" v-for="(item, index1) in fenleide1" :key="index1">
					<view :class="fenleifen == item.category_id ? 'fenleifen' : ''" @click="xuahsdsh(item.category_id)">
						{{ item.name }}
					</view>
				</view>
				<!-- <view
					style="position: relative;top: 1.2rem;border-top-left-radius:1em ;border-top-right-radius:1em ;background-color: #fff;height: 1em;clear: both;">
				</view> -->

			</view>


			<!-- 微信自己写的结束 -->

			<!-- #endif -->

		</view>

		<view style="background-color: #fff;padding: 0 0 1em 0;border-radius: 10px 10px 0 0;overflow: hidden;">
			<view class="element">
				<view class="zijiad_r" v-for="(item, indexssd) in fenleide" :key="indexssd"
					:class="fenleifen_index == item.category_id ? 'gaizid' : ''" @click="xuahsdsh1(item.category_id)">
					{{ item.name }}
				</view>
			</view>
			<view>
				<view class="uni-margin-wrap">
					<swiper class="swiper" style="width: 100%;height: 30vw;" circular :indicator-dots="indicatorDots"
						:autoplay="autoplay" :interval="interval" :duration="duration">
						<swiper-item>
							<view class="swiper-item uni-bg-red" style="width: 30vw;height: 30vw;margin: 0 auto;">
								<image class="tupian" style="margin: 0 auto;" :src="fenleifen_image"></image>
							</view>
						</swiper-item>
					</swiper>
				</view>


			</view>
			<view v-if='thisindex == 0' style="margin-top:1em;">
				<diyshang style="position: relative;" :diyItems="items"></diyshang>
			</view>
			<view class="dizhi">
				<view class="dizhi_q">
					<view class="dizhi_w">
						<view class="dizhi_e">起</view>
					</view>
					<view class="dizhi_y" @click="huoqudizhi(1)">{{ kaishidizhi || '您要从哪里托运' }}</view>
					<view class="dibu_u" v-if="kaishidizhi">
						<input type="text" @input="kaishixiangfa" class="dibu_i" placeholder="请填写您的小区/门牌号" />

					</view>
				</view>

				<view class="dizhi_r">
					<view class="dizhi_w">
						<view class="dizhi_t">终</view>
					</view>
					<view class="dizhi_y" @click="huoqudizhi(2)">{{ jishudizhi || '您要托运到哪里' }}</view>
					<view class="dibu_u" v-if="jishudizhi">
						<input type="text" @input="jiesuxiangfa" class="dibu_i" placeholder="请填写您的小区/门牌号" />

					</view>
				</view>
			</view>
			<view class="jiage" v-if="kaishidizhi != '' && jishudizhi != ''">
				<text>预计</text>
				<text class="jiage_w">{{ fenleifen_jiage }}</text>
				<text
					style="margin-left: 0.5rem; color: #f56c6c; font-size: 0.8em;background-color: reba(0,0,0);line-height: 1rem;">
					已优惠¥{{ (fenleifen_jiage * 1.15 - fenleifen_jiage).toFixed(2) }}

				</text>
			</view>
			<view class="xiayibu" @click="xiayibude">下一步</view>

			<!-- 调试信息 -->
			<!-- <view class="debug-info" v-if="kaishidizhi && jishudizhi">
				<view class="debug-item">
					<text>起始地址: {{ kaishidizhi }}</text>
				</view>
				<view class="debug-item">
					<text>目的地址: {{ jishudizhi }}</text>
				</view>
				<view class="debug-item">
					<text>价格类型: {{ priceTypeText }} (类型{{ priceType }})</text>
				</view>
				<view class="debug-item">
					<text>起步价: {{ fenleifen_jiage_jisuan }}</text>
				</view>
				<view class="debug-item">
					<text>额外价格: {{ eweijiage }}</text>
				</view>
				<view class="debug-item">
					<text>起步公里数: {{ qinbugonglishu }}</text>
				</view>
				<view class="debug-item">
					<text>实际距离: {{ julidegoglishu }}公里</text>
				</view>
				<view class="debug-item">
					<text>总价: {{ fenleifen_jiage }}</text>
				</view>
			</view> -->
		</view>
		<view class="dainhe" @click="daianhua">
			<view class="dainhe_q">
				<text>客服热线</text>
				<text class="dainhe_w">{{ kefyduanbhua }}</text>
				<view class="dainhe_e">
					<image src="@/static/kefye.png" class="tupian" mode="aspectFit"></image>
				</view>
			</view>
		</view>

		<view class="dainhe">
			<view class="dainhe_q">
				<text>添加客服微信咨询</text>
				<text class="dainhe_w"></text>

				<view class="dainhe_e" style="width: 3rem;height: 3rem;margin-left: 1rem;">
					<image src="@/static/qrcode.png" class="tupian" mode="aspectFit" @click="showQRCode"></image>
				</view>

				<view class="dainhe_e" style="width: 2.5rem;height: 2.5rem;margin-left: 1rem;margin-top: 0.25rem;">
					<image src="@/static/23.png" class="tupian" mode="aspectFit"></image>
				</view>

			</view>
		</view>

		<view
			style="width: 95%;margin: 1rem auto;padding: 1rem 0;background-color: #fff;border-radius: 0.5rem;overflow: auto;">
			<view style="width: 95%;height: 2rem;line-height: 2rem;font-size: 1.1rem;font-weight: 900;margin: 0 auto;">
				用户评价</view>
			<view style="width: 95%;margin: 1rem auto;padding: 1rem 0 0 0;" v-for="(item, keydee) in pingjiasde"
				:key="keydee">
				<view style="display: flex; align-items: center; margin: 1rem 0 0.5rem 0;">
					<image style="width: 36px; height: 36px; border-radius: 50%; margin-right: 0.8em;"
						:src="item.district_name"></image>
					<view style="font-size: 1em; color: #666; font-weight: bold; margin-right: auto;">{{ item.hot_name
					}}</view>
					<view style="font-size: 0.85em; color: #aaa;">{{ formatTime(item.province_name) }}</view>
				</view>
				<view
					style="margin: 0.6em 0 0.3em 0; font-size: 1em; color: #222; line-height: 1.6; word-break: break-all;">
					{{ item.full_address }}
				</view>
				<image style="width: 80px; height: 80px; border-radius: 6px; margin-top: 0.5em; object-fit: cover;"
					:src="item.city_name"></image>
			</view>





		</view>

		<swiper @click="togglePopup" style="height: 25vw;width: 95%;margin: 0 auto;" class="swiper" circular
			v-if="shouye_image" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
			:duration="duration">
			<swiper-item>
				<view class="swiper-item uni-bg-red" style="height: 25vw;">
					<image class="tupian" :src="shouye_image"></image>
				</view>
			</swiper-item>
		</swiper>
		<!-- <view class="pinglun">2 -->
		<view style="padding: 1em;position: relative;z-index: 1;">
			<!-- <view class="pinglun_q">
					<view class="tupian" @click="pinglunyun223(true)">
						<image v-if="pinglunyun ==true" src="@/static/huoase.png" class="dianhaseP"></image>
						<image v-else class="dianhaseP"></image>
						<text class="inmagsewe" :class="pinglunyun ==true?'gaiske':''">用户评论</text>
					</view>
					<view class="tupian" @click="pinglunyun223(false)">
						<image v-if="pinglunyun ==false" src="@/static/huoase.png" class="dianhaseP"></image>
						<image v-else class="dianhaseP"></image>
						<text class="inmagsewe" :class="pinglunyun ==false?'gaiske':''">常见问题</text>
					</view>
				</view> -->
			<!-- <view class="kehuliu">
					<view class="pinglun_zan">
						<view class="pinglun_zan_q">
							<image src="@/static/logo1.png" class="pinglun_zan_w"></image>
						</view>
					</view>
					<view class="kehuliu_q">
						<view class="kehuliu_w">时间<view  class="kehuliu_e">201221521</view></view>
					<view class="kehuliu_e1">撒大声地撒大声地阿萨德撒的撒的是撒大声地撒大声地阿萨德撒的撒的是撒大声地撒大声地阿萨德撒的撒的是撒大声地撒大声地阿萨德撒的撒的是撒大声地撒大声地阿萨德撒的撒的是</view>
					</view>
				</view> -->


			<view class="zanm"></view>
			<!--点击收藏2-->
			<view class="collection-box" v-if="is_collection"
				:style="'top:' + (topBarTop() + topBarHeight() + 10) + 'px;'">
				<view class="inner">
					<text>
						点击"添加到我的小程序，\n微信首页下拉即可快速访问店铺
					</text>
				</view>
				<button type="primary" class="close-btn" @click="is_collection = false">x</button>
			</view>

			<!--关注公众号-->
			<!-- #ifdef MP-WEIXIN -->
			<view class="follow-gzh" :class="is_auto ? 'is_auto' : ''" v-if="is_follow == '1'">
				<text class="icon iconfont icon-guanbi" @click="is_follow = 0"></text>
				<official-account></official-account>
			</view>
			<!-- #endif -->

			<!--首页推送-->
			<Homepush v-if="is_homepush" :homepush_data="homepush_data"></Homepush>
			<searchProduct :isShow='showSearch' @close="closeSearch"></searchProduct>
			<tabBar></tabBar>



			<view v-if="showPopup" class="popup">
				<view class="dibu">承诺
					<view class="dibu_q" @click="cancel">
						<image src="@/static/gubidd.png" class="tupian"></image>
					</view>
				</view>
				<view class="dibu_w">
					<view class="dibu_e">
						<image src="@/static/jiajia.png" class="tupian"></image>
					</view>
					<view class="dibu_r">绝无临时加价
						<view class="dibu_t">拒绝低价吸引再中途加价,托运更省心</view>
					</view>
				</view>
				<view class="dibu_w">
					<view class="dibu_e">
						<image src="@/static/baoli.png" class="tupian"></image>
					</view>
					<view class="dibu_r">绝无临时加价
						<view class="dibu_t">拒绝低价吸引再中途加价,托运更省心</view>
					</view>
				</view>
				<view class="dibu_w">
					<view class="dibu_e">
						<image src="@/static/kefude.png" class="tupian"></image>
					</view>
					<view class="dibu_r">绝无临时加价
						<view class="dibu_t">拒绝低价吸引再中途加价,托运更省心</view>
					</view>
				</view>
			</view>
			<view v-if="showPopup" class="mask" @click="togglePopup"></view>

			<!-- 二维码大图弹窗 -->
			<view v-if="showQRCodeModal" class="qrcode-modal" @click="hideQRCode">
				<view class="qrcode-content" @click.stop>
					<view class="qrcode-close" @click="hideQRCode">×</view>
					<image src="@/static/qrcode.png" class="qrcode-image" mode="aspectFit" show-menu-by-longpress="true"
						@click="hideQRCode"></image>
					<text class="qrcode-text">客服微信二维码</text>
					<text class="qrcode-tip">点击图片关闭 · 长按图片识别二维码</text>
				</view>
			</view>
		</view>


	</view>






</template>

<script>
	import diyshang from '@/components/diy/diyshang.vue';
	import Homepush from './home-push/home-push.vue';
	import uniLoadMore from '@/components/uni-load-more.vue';
	import searchProduct from '@/components/searchProduct.vue';

	import config from '@/config.js';


	export default {
		components: {
			diyshang,
			Homepush,
			uniLoadMore,
			searchProduct
		},
		data() {
			return {
				showPlayBtn: true, // 是否显示播放按钮
				hasPlayed: false, // 是否已播放
				audioCtx: null,
				shouye_image: '',
				erweima_image: '',
				store: [],
				mp3_geshi: '',
				// 新开发的
				fenleifen: '',
				fenleide1: [],
				fenleide: [],
				fenleifen_index: '',
				pinglunyun: true,
				fenleifen_image: '',
				fenleifen_jiage: '',
				fenleifen_jiage_jisuan: '',
				kefyduanbhua: '',
				showPopup: false,
				kaishidizhi: '',
				jishudizhi: '',
				kaishidizhi_lat: '',
				kaishidizhi_long: '',
				jishudizhi_lat: '',
				jishudizhi_long: '',
				kaishixiang: '',
				jiesuxiang: '',
				jishudizhi_name: '',
				kaishidizhi_name: '',
				qinbugonglishu: '',
				eweijiage: '',
				julidegoglishu: '',

				/*是否正在加载*/
				loading: false,
				background: '',
				listData: [],
				indicatorDots: true,
				autoplay: true,
				interval: 3000,
				duration: 500,
				items: [],
				/*收藏引导*/
				is_collection: false,
				/*关注*/
				is_follow: '0',
				/*是否首页推送*/
				is_homepush: false,
				/*首页推送数据*/
				homepush_data: {},
				triggered: true,
				target: 0,
				thisindex: 0,
				category_list: [],
				product_list: [],
				page: 1,
				last_page: 0,
				no_more: false,
				indexStop: 0,
				title_name: '',
				bgcolor: '',
				msgNum: 0,
				title_image: false,
				toplogo: '',
				url: '',
				jweixin: null,
				showSearch: false,
				openCategory: {
					color: "#000000",
					open: 0
				},
				pingjiasde: [],
				is_auto: 0,
				innerAudioContext: uni.createInnerAudioContext(),
				asdad: 0,
				isSameProvince: false, // 是否同省
				priceType: 1, // 价格类型：1-同省，2-跨省普通，3-跨省热门11
				priceTypeText: '同省', // 价格类型文本
				asdsadasd: '送货',
				xuanasge: 0,
				showQRCodeModal: false // 控制二维码大图显示
			};
		},
		watch: {
			'thisindex': function(n, o) {
				if (n != o) {
					this.category_id = this.category_list[n].category_id;
					this.toggleInit();
					if (n != 0) {
						this.getProduct()
					}
				}
			}
		},
		computed: {
			/*加载中状态*/
			loadingType() {
				if (this.loading) {
					return 1;
				} else {
					if (this.product_list.length != 0 && this.no_more) {
						return 2;
					} else {
						return 0;
					}
				}
			}
		},
		onTabItemTap() {
			//#ifdef H5
			if (process.env.NODE_ENV === 'production') {
				window.location.href = config.app_url + config.h5_addr + '/pages/index/index';
			}
			//#endif
		},
		onShow() {
			this.getTabBarLinks();

			// this.$refs.audio.play();
		},
		onLoad(options) {
			const pages = getCurrentPages();
			const cur = pages[pages.length - 1];
			const qs = Object.keys(cur.options || {})
			.map(k => `${k}=${encodeURIComponent(cur.options[k])}`)
			.join('&');
			const fullUrl = `/${cur.route}${qs ? '?' + qs : ''}`;
			uni.showToast({
					title: 'fullUrl:' + fullUrl,
					icon: 'none'
				})
			uni.$on('orderPageShow', () => {
				if (this.audioCtx) {
					this.audioCtx.stop();
					this.showPlayBtn = false;
					this.hasPlayed = true;
				}
			});
			console.log('获取到options',options)
			// options 对象包含了所有传递进来的参数	
			if (options && options.click_id) {
				this.$store.commit('setClickID', options.click_id);
				
			}
			if (options && options.gdt_vid) {
				this.$store.commit('setClickID', options.gdt_vid);
				
			}
			if (options && options.qz_gdt) {
				this.$store.commit('setClickID', options.qz_gdt);
				
			}
			//#ifdef H5
			if (this.isWeixin()) {
				this.url = window.location.href;
			}
			//#endif
			this._freshing = false;
			/*获取订单列表*/
			this.getData();
			this.getList();
			console.log('bofang ')
			this.bofang();


		},
		onPullDownRefresh() {
			if (this.thisindex == 0) {

				console.log("nalide")
				this.getData();
			} else {

				console.log("hzle")
				this.toggleInit();
				this.getProduct();
			}
		},
		onReachBottom() {
			this.scrolltolowerFunc();

			uni.showToast({
				title: "到底了",
				icon: "none",
				duration: 1000
			})
		},
		methods: {
			bofangdse() {

				if (this.innerAudioContext.paused) {
					this.asdad = 0;
					this.innerAudioContext.play();
				} else {
					this.asdad = 1;
					this.innerAudioContext.pause();
				}
			},
			bofang() {
				this.mp3_geshi = "https://xiaoma.tsinghua.site/uploads/mp3/ForElise.mp3"
				// console.log(this.mp3_geshi )
				// 创建音频上下文
				this.audioCtx = uni.createInnerAudioContext();
				this.audioCtx.src = this.mp3_geshi + '?t=' + Date.now();
				this.audioCtx.loop = false; // 只播放一次

				// 监听播放结束
				this.audioCtx.onEnded(() => {
					this.showPlayBtn = false;
					this.hasPlayed = true;
				});

				if (this.hasPlayed) return;
				this.audioCtx.play();
				this.hasPlayed = true; // 防止多次点击


				return;

				// 先停止当前播放
				this.innerAudioContext.stop();
				// 重新设置 src
				this.innerAudioContext.src = this.mp3_geshi + '?t=' + Date.now(); // 加时间戳防缓存
				this.innerAudioContext.autoplay = true;
				this.innerAudioContext.loop = true;
				this.innerAudioContext.play();
				this.innerAudioContext.onPlay(() => {});
				this.innerAudioContext.onError((res) => {
					console.log(res.errMsg);
					console.log(res.errCode);
				});
			},
			kaishixiangfa(event) {

				let self = this;
				self.kaishixiang = event.detail.value;
			},
			jiesuxiangfa(event) {
				let self = this;
				self.jiesuxiang = event.detail.value;
			},

			// 定位获取当前位置
			async huoqudizhi(type) {
				const self = this;

				// 权限处理函数
				const ensureLocationAuth = async () => {
					// 1. 检查当前权限状态
					const {
						authSetting
					} = await new Promise(resolve => {
						uni.getSetting({
							success: resolve,
							fail: () => resolve({
								authSetting: {}
							})
						});
					});

					// 2. 如果已有权限直接返回
					if (authSetting['scope.userLocation']) return true;

					// 3. 请求权限
					try {
						await new Promise((resolve, reject) => {
							uni.authorize({
								scope: 'scope.userLocation',
								success: resolve,
								fail: reject
							});
						});
						return true;
					} catch (error) {
						// 4. 权限被拒绝时引导用户
						await new Promise(resolve => {
							uni.showModal({
								title: '提示',
								content: '需要定位权限以选择地址，请在设置中开启定位权限',
								success({
									confirm
								}) {
									if (confirm) uni.openSetting();
									resolve();
								}
							});
						});
						throw new Error('用户未授权定位权限');
					}
				};

				try {
					// 确保权限
					await ensureLocationAuth();
					// 选择位置
					
					uni.chooseLocation({
						success:function(locationRes){
							
							const {
								address,
								name,
								latitude,
								longitude
							} = locationRes;
							if (name == ""){
								uni.showToast({
									title: '请选择详细地址',
									icon: 'error'
								});
								return;
							}
								
							if (type === 1) {
								self.kaishidizhi = address;
								self.kaishidizhi_name = name;
								self.kaishidizhi_lat = latitude;
								self.kaishidizhi_long = longitude;
							} else if (type === 2) {
								self.jishudizhi = address;
								self.jishudizhi_name = name;
								self.jishudizhi_lat = latitude;
								self.jishudizhi_long = longitude;
							}


							// 查询价格
							self.calculationOrderPrice();
						},
						fail:function(failRes){
						}
					})
// 处理位置结果
					
					
				} catch (error) {
					console.error('位置选择失败:', error);
					uni.showToast({
						title: '位置选择失败',
						icon: 'none'
					});
					return;
				}
			},
            calculationOrderPrice(){
                let self = this

                if (self.jishudizhi_lat && self.kaishidizhi_long) {
                    self._get('user.order/calculationOrderPrice', {
							category_id: self.fenleifen_index,
							start_address_name: self.kaishidizhi_name,
							end_address_name: self.jishudizhi_name,
							start_lat: self.kaishidizhi_lat,
							start_lng: self.kaishidizhi_long,
							end_lat: self.jishudizhi_lat,
							end_lng: self.jishudizhi_long,
						}, function(res) {
							console.log(res)
							self.fenleifen_jiage = res.data.price
							self.julidegoglishu = res.data.distance
						});
                }
            },

			formatTime(timestamp) {
				if (!timestamp) return '';
				// 如果是秒级时间戳，转为毫秒
				if (timestamp.toString().length === 10) {
					timestamp = timestamp * 1000;
				}
				const date = new Date(timestamp);
				const Y = date.getFullYear();
				const M = (date.getMonth() + 1).toString().padStart(2, '0');
				const D = date.getDate().toString().padStart(2, '0');
				const h = date.getHours().toString().padStart(2, '0');
				const m = date.getMinutes().toString().padStart(2, '0');
				const s = date.getSeconds().toString().padStart(2, '0');
				return `${Y}-${M}-${D}`;
			},
			xiayibude() {



				if (!this.kaishidizhi) {
					uni.showToast({
						title: '请输入起始位置！',
						icon: 'none'
					})
					return;
				}

				// if (!this.kaishixiang) {
				// 		uni.showToast({
				// 			title: '请输入起始详细地址！',
				// 			icon: 'none'
				// 		})
				// 		return;
				// 	}
				if (!this.jishudizhi) {
					uni.showToast({
						title: '请输入目的位置！',
						icon: 'none'
					})
					return;
				}
				// if (!this.jiesuxiang) {
				// 	uni.showToast({
				// 		title: '请输入目的详细地址！',
				// 		icon: 'none'
				// 	})
				// 	return;
				// }

				let self = this;

				if (self.audioCtx) {
					self.audioCtx.stop(); // 点击下一步时强制停止
					self.showPlayBtn = false;
					self.hasPlayed = true;
				}
				uni.showLoading({
					title: '加载中'
				});
				self._get('user.Order/index_chuli', {
					fenleifen: self.fenleifen_index, //一级
					fenleifen_index: self.fenleifen_index, //二级2
					fenleifen_image: self.fenleifen_image, //二级图片
					fenleifen_jiage: self.fenleifen_jiage, //总价格
					fenleifen_jiage_jisuan: self.fenleifen_jiage_jisuan, //单价格公里计算
					// kefyduanbhua:  self.kefyduanbhua,//客服电话
					kaishidizhi: self.kaishidizhi, //开始地址
					kaishidizhi_lat: self.kaishidizhi_lat, //开始lat
					kaishidizhi_long: self.kaishidizhi_long, //开始long
					kaishixiang: self.kaishixiang, //开始详细地址
					jishudizhi: self.jishudizhi, //结束地址
					jishudizhi_lat: self.jishudizhi_lat, //结束lat
					jishudizhi_long: self.jishudizhi_long, //结束long11
					jiesuxiang: self.jiesuxiang, //结束详细地址2
					kaishidizhi_name: self.kaishidizhi_name,
					jishudizhi_name: self.jishudizhi_name,
					qinbugonglishu: self.qinbugonglishu,
					eweijiage: self.eweijiage,
					julidegoglishu: self.julidegoglishu > 0 ? self.julidegoglishu : self.qinbugonglishu,
					priceTypeText: self.priceTypeText,
				}, function(res) {
					self.gotoPage('/pages/order/huodanzhifu/dingdanzhifu?order_iddd=' + res.data.list);

				})

			},
			togglePopup() {
				this.showPopup = !this.showPopup;
			},
			cancel() {
				this.showPopup = false;
			},

			xuahsdsh(type) {
				let self = this;

				self.xuanasge = 1;
				self.fenleifen = type;
				self.fenleifen_index = '';
				self.getData();
			},
			xuahsdsh1(type) {
				let self = this;
				self.fenleifen_index = type;
				self.getData();
                
			},

			daianhua() {
				uni.makePhoneCall({
					phoneNumber: this.kefyduanbhua //仅为示例1231341
				});
			},
			pinglunyun223(type) {
				this.pinglunyun = type;
			},
			/*获取首页分类212*/
			getData() {


				let self = this;
				// self.gotoPage('/pages/order/huodanzhifu/dingdanzhifu?order_iddd=2');
				uni.showLoading({
					title: '加载中'
				});
				self._get('index/index', {
					url: self.url,
					fenleifen: self.fenleifen,
					fenleifen_index: self.fenleifen_index,
				}, function(res) {


					self.pingjiasde = res.data.pingjiasde;

					// console.log("来了" + uni.getStorageSync('mp3_has_played'))

					// if (self.xuanasge == 0) {
					// 	if (res.data.setting.bobaode && uni.getStorageSync('mp3_has_played')) {

					// 		console.log(1)

					// 		self.mp3_geshi = res.data.setting.bobaode;
					// 		self.bofang();
					// 		uni.setStorageSync('mp3_has_played', false);
					// 	} else {
					// 		console.log(2)
					// 		self.showPlayBtn = false;
					// 		self.hasPlayed = true;
					// 	}
					// }
					self.fenleifen_image = res.data.setting.chaerji_img;
					self.shouye_image = res.data.setting.shouye_image;
					self.erweima_image = res.data.setting.erweima_image;
					self.fenleide1 = res.data.setting.dingdanfenlei;
					self.fenleifen = self.fenleifen ? self.fenleifen : res.data.setting.dingdanfenlei[0]
						.category_id;
					self.fenleide = res.data.setting.erjifenlei;
					self.fenleifen_index = self.fenleifen_index ? self.fenleifen_index : res.data.setting
						.erjifenlei[0].category_id;
                    self.calculationOrderPrice();
					self.$store.commit('changePacketPt', res.data.setting.store.package_pt);
					self.$store.commit('changePacketZy', res.data.setting.store.package_zy);
					self.$store.commit('changePacketMt', res.data.setting.store.package_mt);
					self.$store.commit('changePacketHh', res.data.setting.store.package_hh);

					

					
					

					let auto = uni.getStorageSync('TabBar').is_auto && uni.getStorageSync('TabBar').is_auto != 0;
					self.is_auto = auto;
					self.listData = res.data.list;
					self.background = res.data.background;
					self.items = res.data.items;
					self.title_name = res.data.page.params.title;
					self.bgcolor = res.data.page.style.titleBackgroundColor;
					self.msgNum = res.data.msgNum;
					self.toplogo = res.data.page.style.toplogo;
					self.setPage(res.data.page);
					self.title_type = res.data.page.params.title_type;
					self.titleTextColor = res.data.page.style.titleTextColor;
					self.openCategory = res.data.page.category;
					//弹出收藏
					// #ifdef  MP-WEIXIN
					let isFirst = uni.getStorageSync('isFirst');
					if (isFirst == '' && res.data.setting.collection.status == '1') {
						self.is_collection = true;
						uni.setStorageSync('isFirst', 1);
					}
					self.is_follow = res.data.setting.officia.status;
					// #endif

					uni.hideLoading();
					self.loadding = false;
					uni.stopPullDownRefresh();
				});
			},
			/*获取数据*/
			getList() {
				let self = this;
				self._get('product.category/index', {}, function(res) {
					self.category_list = res.data.list;
					let fistIndex = {
						name: '推荐',
						category_id: '0'
					}
					self.category_list.unshift(fistIndex)
				});
			},
			/*获取数据*/
			getProduct() {
				let self = this;
				let page = self.page;
				self.loading = true;
				self._get('product.product/lists', {
					page: page || 1,
					category_id: self.category_id,
					search: '',
					sortType: 'all',
					sortPrice: 0,
					list_rows: 10,
				}, function(res) {
					self.loading = false;
					uni.stopPullDownRefresh();
					self.product_list = self.product_list.concat(res.data.list.data);
					self.last_page = res.data.list.last_page;
					if (res.data.list.last_page <= 1) {
						self.no_more = true;
					}
					// #ifdef MP
					if (page >= 9) {
						self.no_more = true;
					}
					// #endif
				});
			},
			/*可滚动视图区域到底触发*/
			scrolltolowerFunc() {
				let self = this;
				if (self.page < self.last_page) {
					self.page++;
					self.getProduct();
				}
				self.no_more = true;
			},

			/*设置页面*/
			setPage(page) {

				uni.setNavigationBarTitle({
					title: page.params.name
				});

				let colors = '#000000';
				if (page.style.titleTextColor == 'white') {
					//字母要小写
					colors = '#ffffff'
				}
				uni.setNavigationBarColor({
					frontColor: colors,
					backgroundColor: page.style.titleBackgroundColor
				})

			},

			/*分享当前页面*/
			onShareAppMessage() {
				let self = this;
				return {
					title: self.page.params.share_title,
					path: '/pages/index/index?' + self.getShareUrlParams(),
				};
			},
			setTabBarItem(n) {
				if (n == 2) {
					uni.setTabBarItem({
						index: 2,
						pagePath: '/pages/order/wodeixaoisdng',
						text: '订单',
						iconPath: 'static/order.png',
						selectedIconPath: 'static/order_active.png',
					})
				}

			},
			toggleInit() {
				this.page = 1;
				this.last_page = 0;
				this.no_more = false;
				this.product_list = [];
			},
			//点击nav控制下面的展示
			setIndex(e) {
				this.thisindex = e
			},
			/* 禁止手动滑动 */
			stopTouchMove() {
				return true
			},
			/*扫一扫核销*/
			scanQrcode: function() {
				let self = this;
				//#ifdef H5
				// 只允许通过相机扫码
				self.jweixin.scanQRCode({
					needResult: 1,
					scanType: ["qrCode", "barCode"],
					success: function(res) {
						self.gotoPage('/pages/store/clerkorder?order_no=' + res.resultStr);
					},
					error: function(res) {
						uni.showToast({
							title: '扫码失败，请重试'
						})
					}
				});
				//#endif
				//#ifndef H5
				// 只允许通过相机扫码
				uni.scanCode({
					onlyFromCamera: true,
					success: function(res) {
						if (res.errMsg == 'scanCode:ok') {
							self.gotoPage('/pages/store/clerkorder?order_no=' + res.result);
						} else {
							uni.showToast({
								title: '扫码失败，请重试'
							})
						}
					}
				});
				//#endif
			},

			/* 关闭搜索 */
			closeSearch() {
				this.showSearch = false;
			},

			

			
			// 显示二维码大图
			showQRCode() {
				this.showQRCodeModal = true;
			},
			// 隐藏二维码大图
			hideQRCode() {
				this.showQRCodeModal = false;
			},
			// 长按识别二维码
			recognizeQRCode() {
				// #ifdef MP-WEIXIN
				uni.previewImage({
					current: this.erweima_image,
					urls: [this.erweima_image],
					longPressActions: {
						itemList: ['识别图中二维码'],
						success: (data) => {
							if (data.tapIndex === 0) {
								uni.showToast({
									title: '长按图片识别二维码',
									icon: 'none'
								});
							}
						}
					}
				});
				// #endif
				// #ifndef MP-WEIXIN
				uni.showToast({
					title: '长按图片可识别二维码',
					icon: 'none',
					duration: 2000
				});
				// 在非微信小程序环境下，显示二维码大图供用户长按识别
				this.showQRCodeModal = true;
				// #endif
			}
		}
	};
</script>
<style lang="scss">
	page {
		background-color: #EBEBEB;
	}

	.w100 {
		width: 100%;
	}

	.foot_ {
		height: 98rpx;
		width: 100%;
	}

	.user-header {
		position: relative;
		@include background_color('background_color');
	}

	.user-header .user-header-inner {
		position: relative;
		padding: 30rpx 30rpx 120rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		overflow: hidden;
		margin-bottom: 100rpx;
	}

	.user-header .user-header-inner::after,
	.user-header .user-header-inner::before {
		display: block;
		content: '';
		position: absolute;
		border-radius: 50%;
		z-index: 0;
	}

	.user-header .user-header-inner::after {
		width: 400rpx;
		height: 400rpx;
		right: -100rpx;
		bottom: -200rpx;
		background-image: radial-gradient(90deg, rgba(255, 255, 255, 0.2) 10%, rgba(255, 255, 255, 0));
	}

	.user-header .user-header-inner::before {
		width: 200rpx;
		height: 200rpx;
		left: -60rpx;
		top: -20rpx;
		background-image: radial-gradient(-90deg, rgba(255, 255, 255, 0.2) 10%, rgba(255, 255, 255, 0));
	}

	.user-header .user-info {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.user-header .photo,
	.user-header .photo image {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
	}

	.user-header .photo {
		border: 4rpx solid #ffffff;
	}

	.user-header .info {
		padding-left: 20rpx;
		box-sizing: border-box;
		overflow: hidden;
		color: #ffffff;
	}

	.user-header .info .name {
		font-weight: bold;
		font-size: 32rpx;
	}

	.user-header .info .tel {
		font-size: 26rpx;
	}

	.user-header .info .grade {
		display: block;
		padding: 4px 16rpx;
		font-size: 22rpx;
		/* height: 36rpx; */
		line-height: 36rpx;
		border-radius: 40rpx;
		background-color:rgba($color: #000000, $alpha: 0.1);
		color: #ffffff;
		font-family: PingFang SC;
	}

	.user-header .sign-box {
		position: absolute;
		right: 20rpx;
		padding: 0 10rpx;
		height: 50rpx;
		border: 1px solid #ffe300;
		border-radius: 25rpx;
		font-size: 24rpx;
		color: #ffe300;
		z-index: 10;
	}

	.user-header .sign-box .iconfont {
		color: #ffe300;
	}

	.user-header .my-order {
		position: absolute;
		padding: 0 30rpx;
		/* height: 240rpx; */
		right: 20rpx;
		bottom: -75rpx;
		left: 20rpx;
		box-sizing: border-box;
		border-radius: 16rpx;
		/* box-shadow: 0 0 6rpx 0 rgba(0, 0, 0, 0.1); */
		background: #ffffff;
		z-index: 10;
	}

	.order_center {
		border-left: 1rpx solid #D9D9D9;
		border-right: 1rpx solid #D9D9D9;
	}

	.my-order .item {
		display: flex;
		margin: 20rpx 0;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 26rpx;
		flex: 1;
	}

	.my-assets .icon-box image {
		width: 48rpx;
		height: 48rpx;
		margin-bottom: 16rpx;
	}

	.my-order .icon-box,
	.my-assets .icon-box {
		width: 60rpx;
		height: 60rpx;
	}

	.my-order .icon-box .iconfont,
	.my-assets .icon-box .iconfont {
		font-size: 50rpx;
		color: #333333;
	}

	.my-assets .icon-box .dot {
		position: absolute;
		top: -13rpx;
		right: -8rpx;
		height: 25rpx;
		min-width: 25rpx;
		padding: 4rpx;
		border-radius: 20rpx;
		font-size: 20rpx;
		background: #f00808;
		color: #ffffff;
	}

	.my-assets {
		margin: 0 20rpx;
		padding: 30rpx;
		padding-top: 0;
		background: #ffffff;
		border-radius: 12rpx;
	}

	.my-assets .item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.my-wallet {
		position: relative;
		width: 200rpx;
		border-left: 1px solid #dddddd;
	}

	.my-wallet::after {
		position: absolute;
		display: block;
		content: '';
		left: 0;
		border: 8rpx solid transparent;
		border-left-color: #dddddd;
	}

	.menu-wrap {
		margin: 0 20rpx;
		margin-top: 30rpx;
		background: #ffffff;
		/* box-shadow: 0 0 6rpx 0 rgba(0, 0, 0, 0.1); */
		border-radius: 12rpx;
	}

	.menu-wrap .group-bd {
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
	}

	.menu-wrap .item {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		width: 142rpx;
		height: 150rpx;
		font-size: 24rpx;
	}

	.menu-wrap .icon-round {
		width: 60rpx;
		height: 60rpx;
		color: #ffffff;
	}

	.menu-wrap .item .iconfont {
		font-size: 40rpx;
		color: #ffffff;
	}

	.menu-wrap .item .name {
		margin-top: 19rpx;
	}

	.bind_phone {
		width: 100%;
		height: 80rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		margin-bottom: 30rpx;
	}

	.bind_content {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #ffffff;
		/* box-shadow: 0 0 6rpx 0 rgba(0, 0, 0, 0.1); */
		border-radius: 16rpx;
		height: 100%;
		padding: 0 20rpx;
	}

	.bind_txt {}

	.bind_btn {
		width: 134rpx;
		height: 50rpx;
		line-height: 50rpx;
		font-size: 22rpx;
		border-radius: 25rpx;
		text-align: center;
		color: #FFFFFF;
		background-color: #e2231a;
	}

	.vertical {
		position: absolute;
		top: 10px;
		right: 53px;
		z-index: 100000;
	}

	.vertical_img {
		width: 100rpx;
		height: 100rpx;
	}

	.f20 {
		margin-left: 5rpx;
		font-size: 19rpx;
	}

	.red_mini {
		color: #333333;
		font-size: 36rpx;
		font-weight: bold;
	}

	.icon-zhuanshutequan {
		color: #f5dca6;
		margin-right: 3px;
	}

	.news {
		position: absolute;
		top: 40rpx;
		right: 20rpx;
		z-index: 100;
	}

	.news .chat {
		width: 40rpx;
		height: 40rpx;
	}

	.news .icon-xiaoxi {
		font-size: 50rpx;
		color: #FFFFFF;
	}

	.news_num {
		position: absolute;
		top: 24rpx;
		right: 44rpx;
		z-index: 100;
		border-radius: 50%;
		width: 25rpx;
		height: 25rpx;
		text-align: center;
		line-height: 25rpx;
		color: #FFFFFF;
		background-color: #ff6633;
		padding: 5rpx;
		font-size: 20rpx;
	}

	.my-assets-all {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 90rpx;
		line-height: 90rpx;
	}

	.my-assets-all .icon.icon-jiantou {
		font-size: 12px;
		color: #999999;
	}
</style>
